<template>
  <div class="equipMonitor">
    <div class="account_top">
      <div class="input_one">
        <span>设备名称：</span>
        <a-input v-model="form1.name1" style="width: 75%" />
      </div>
      <div class="input_one">
        <span>厕所名称：</span>
        <a-input v-model="form1.name2" style="width: 75%" />
      </div>
      <div class="account_center">
        <a-button type="primary" @click="reload"> 重置 </a-button>
        <a-button @click="seachEquipMData">查询</a-button>
      </div>
    </div>
    <a-button style="margin: 4vh 25px 0 4vw;" @click="handleRefresh">手动刷新</a-button>
    <a-checkbox style="margin: 15px 0 10px 20px" @change="onChange">
      实时刷新
    </a-checkbox>
    <span style="margin:15px 0 10px 0;color:red" v-if="refreshInTime">当前时间：{{times}} {{minute}}分{{second}}秒后刷新</span>
    <div class="account_bottom" style="margin-top: 40px">
      <div class="tottom_table">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :bordered="true"
          :scroll="{ x: 'max-content' }"
          :rowKey="(record, index) => index"
        >
        </a-table>
        <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items style="text-align: right;margin-top: 15px;" />
      </div>
    </div>
  </div>
</template>

<script>
import {getEquipMonitorData,searchMonitorData} from '../../api'
export default {
  data() {
    return {
      form1:{
        name1:'',
        name2:'',
      },
      columns: [
        {
          title: "序号",
          dataIndex: "id",
        },
        {
          title: "编号",
          dataIndex: "wc_number",
        },
        {
          title: "厕所名称",
          dataIndex: "wc_name",
        },
        {
          title: "所属地区",
          dataIndex: "area",
        },
        {
          title: "所属部门",
          dataIndex: "department",
        },
        {
          title: "传感器名称",
          dataIndex: "toilet_name",
        },
        {
          title: "传感器类型",
          dataIndex: "toilet_type",
        },
        {
          title: "数值",
          dataIndex: "data",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
        },
        {
          title: "更新时间",
          dataIndex: "update_time",
        },
      ],
      data:[],
      selectedRowKeys: [],
      loading: false,
      refreshInTime: false,
      refreshTimer: null,
      minute: 5,
      second: 0,
      times:'',//格式化之后的当前时间
      currentTime: new Date(), //当前时间
      current:1,
      pageSize:10,
      total:0,
    };
  },
  mounted(){
    this.getDataOfMon()
  },
  methods: {
    onChange(e) {
      let states = e.target.checked;
      if (states) {
        this.refreshInTime = true;
        this.getTimes();
        return;
      }
      this.refreshInTime = false;
      this.minute = 5;
      this.second = 0;
      clearInterval(this.refreshTimer);
    },
    getTimes() {
      this.refreshTimer = setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval: function () {
      console.log(11);
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      _this.times =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      this.countDown();
    },
    countDown() {
      if (this.minute == 0) {
        this.current = 1
        this.getDataOfMon()
        this.minute = 5;
      }
      if (this.second == 0) {
        this.minute--;
        this.second = 60;
        this.second--;
      } else {
        this.second--;
      }
    },
    async getDataOfMon(){
      let page = this.current
      let page_size = this.pageSize
      let res = await getEquipMonitorData(page,page_size)
      this.total = res.count
      this.data = res.results
    },
    currentpage(val){
        this.current = val
        this.getDataOfMon()
    },
    handleRefresh(){
      this.current = 1
      this.getDataOfMon()
    },
    async seachEquipMData(){
      this.current = 1
      let page = this.current
      let page_size = this.pageSize
      let name1 = this.form1.name1
      let name2 = this.form1.name2
      let res = await searchMonitorData(name1,name2,page,page_size)
      this.total = res.count
      this.data = res.results
    },
    reload(){
      this.form1 = {}
      this.current = 1
      this.getDataOfMon()
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less">
.equipMonitor {
  padding: 24px;
  .account_top {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    .input_one {
      width: 33.33%;
      margin: 10px 0 10px 0;
      span {
        width: 25%;
        display: inline-block;
        text-align: right;
      }
    }
    .account_center {
      margin-top: 10px;
      width: 33.33%;
      text-align: right;
    }
  }
  .account_bottom {
    .bottom_top {
      margin: 50px 0 30px 0;
    }
  }
  .table {
    :global {
      .ant-table-thead > tr > th {
        background: #fff !important;
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
      .ant-table-tbody > tr > td {
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
    }
  }
  .ss {
    span {
      width: 100% !important;
    }
  }
}
</style>